<template>
    <!-- 分销商列表 -->
    <div class="">
        <div class="head">
            <span>商品列表</span>
        </div>
        <button class="bu1" @click="addNew">发布商品</button>
        <div class="searchFor">
            <div class="searchFor-1">
                <span>商品搜索</span>
                <input type="text" placeholder="输入名称搜索" class="sousuo">
                <span>商品分类</span>
                <el-select v-model="value1" class="m-2" placeholder="请选择分类" size="small">
                    <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <span>商品价格</span>
                <input type="text" class="sousuo1">
                <span>~</span>
                <input type="text" class="sousuo1">

            </div>
         
            <div class="searchFor-2">

                <span>加入时间</span>
                <input type="text" class="sousuo1">
                <span>至</span>
                <input type="text" class="sousuo1">
                <button class="bu2">筛选</button>
                <span class="remove">清空</span>
            </div>
        </div>
        <div class="biaoqian">
        
             <el-tabs type="border-card">
            <el-tab-pane label="全部"></el-tab-pane>
            <el-tab-pane label="销售中"></el-tab-pane>
            <el-tab-pane label="下架中"></el-tab-pane>
            <el-tab-pane label="售罄"></el-tab-pane>
            <el-tab-pane label="回收站"></el-tab-pane>
             </el-tabs>
        </div>
        <div class="form">
            <el-table :data="data" border style="width: 100%">
                <el-table-column prop="id" label="商品ID" width="180" align="center" />
                <el-table-column prop="name" label="商品名称" width="180" align="center" />
                <el-table-column prop="description" label="商品信息" width="180" align="center" />
                <el-table-column prop="categoryName" label="分类名称" width="180" align="center" />
                <el-table-column prop="originPrice" sortable label="商品原价" align="center" />
                <el-table-column prop="price" sortable label="商品价格" align="center" />

                <el-table-column prop="stocks" sortable label="库存" align="center" />

                <el-table-column prop="sales" sortable label="销量" align="center" />

                <el-table-column prop="status" sortable label="状态" align="center" />

                <el-table-column prop="Offline" sortable label="访问量" align="center" />

            

                <el-table-column fixed="right" label="操作" width="120" align="center">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click.prevent="editRow(scope.row)">编辑</el-button>
                        <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>

            </el-table>
            <!-- 分页 -->
            <el-pagination small background layout="prev, pager, next" :total="total" class="mt-4"
            :page-size="pageSize" :current-page="currentPage"
                @current-change="currentChange" />
        </div>
    </div>
</template>

<script setup lang="ts">
import productService from '@/service/productService';
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router';

const router = useRouter();
onMounted(()=>{
    loadData("","",1,10)
})
const addNew = ()=>{
    router.push("/AddProduct")
}
// 表格数据
const data = ref([])
const loadData = (categoryId:string,name:string,pageNum:number,pageSize:number)=>{
    productService.productList("","",1,999999).then((res:any)=>{
        total.value = res.data.data.length
    })
    productService.productList(categoryId,name,pageNum,pageSize).then((res:any)=>{
    data.value = res.data.data
    data.value = data.value.map((item:any)=>{
        item.stocks=0
        item.skuList.forEach((ite:any) => {
            item.stocks= item.stocks+ite.stock;
        });
        return item;
    })
})
}
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(50)



const value1 = ref('')



const options1 = [
    {
        value: '抖音',
        label: '一级',
    },
    {
        value: '青年大学习',
        label: '二级',
    },
    {
        value: '小红书',
        label: '三级',
    }
]



// 表格后面的按钮
const editRow = (index: number) => {
    //   tableData.value.splice(index, 1)
    

}
const deleteRow = (id: number) => {
    productService.deleteById(id)
    loadData("","",currentPage.value,pageSize.value)
}

// 分页

const currentChange = (val: number) => {
    currentPage.value = val
}
</script>

<style scoped lang="less">
.biaoqian{
    width: 100%;
    height: 60px;
}
.head {
    width: 100%;
    height: 40px;
    background-color: white;

    span {
        margin-left: 20px;
    }
}

.bu1 {
    cursor: pointer;
    border-radius: 5px;
    border: 1px solid #ed742f;
    background-color: #ed742f;
    color: white;
    width: 90px;
    height: 30px;
    line-height: 23px;
    margin-top: 10px;
    margin-bottom: 15px;
}

// 搜索
.searchFor {
    width: 100%;
    height: 130px;
    background-color: #ffffff;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #2c2c2c;
    font-size: 16px;
    margin-bottom: 10px;

    span {
        margin-right: 10px;
        margin-left: 20px;
    }

    .sousuo {
        width: 200px;
        text-align: center;
        height: 25px;
        border-radius: 5px;
        border: 1px solid #000000
    }

    .sousuo1 {
        width: 60px;
        text-align: center;
        height: 25px;
        border-radius: 5px;
        border: 1px solid #000000
    }

    .searchFor-1 {
        margin-bottom: 20px;
    }

    .bu2 {
        border-radius: 5px;
        border: 1px solid #ed742f;
        background-color: #ed742f;
        color: white;
        width: 60px;
        height: 30px;
        line-height: 23px;
        margin-left: 20px;
    }

    .remove {
        color: #ed742f;
    }
}
</style>